<template>
  <div class="reanalysisEcharts">
     <div class="table-box">
      <IconTitle title="基本信息" imgUrl="yunwei">
        <span class="slot">品牌管理</span>
      </IconTitle>
      <div class="echarts-box">
        <el-row :gutter="10">
          <el-col :span="6"
            >
            <div class="echarts-item echarts-des">
              <div class="item-title">
                <i class="icon-ziliao"></i>
                <span>故障统计</span>
              </div>
              <el-row class="errortj">
                <el-col :span="12" class="stopTime">
                  <p>总停机时间</p>
                  <p>320<label class="uint">分钟</label></p>
                </el-col>
                <el-col :span="12" class="total">
                  <p >故障次数</p>
                  <p>34<!--<label class="uint">次</label>--></p>
                </el-col>
              </el-row>
              <p class="rank">
                <label>
                  设备故障排行：第 41 名<i class="el-icon-picture-outline"></i><i class="el-icon-picture-outline"></i><i class="el-icon-picture-outline"></i><i class="el-icon-arrow-right"></i>
                </label>
              </p>
            </div>
            <div style="border: 1px solid #E3E3E3;margin-top: -80px">

            </div>
          </el-col>
          <el-col :span="6"
            >
            <div class="echarts-item">
              <div class="item-title">
                <i class="icon-ziliao"></i>
                <span>故障等级分布</span>
                <p>fault</p>
              </div>
            <div>
              <div v-for="(item,index) in errorLevels" :key="index" class="errorlevel">
                <el-row>
                  <el-col :span="7">
                    <label class="name">{{item.name}}</label> <label>{{item.percentage}}</label>
                  </el-col>
                  <el-col :span="14">
                    <el-progress :stroke-width="9" :percentage="item.value" :color="index==0?'#25C689':index==1?'#FF9800':index==2?'#E51C23':''" :format="levelFormat"></el-progress>
                  </el-col>
                  <el-col :span="3">
                    <label>{{item.value}}</label>
                  </el-col>
                </el-row>

              </div>
            </div>
            </div>
          </el-col>
          <el-col :span="6"
            >
            <div class="echarts-item week">
              <div class="item-title">
                <i class="icon-ziliao"></i>
                <span>故障类型分布</span>
                <p>fault</p>
              </div>
              <div id="type-echart" style="width: 100%;height:220px;"></div>
            </div>
          </el-col>
          <el-col :span="6"
          >
            <div class="echarts-item week">
              <div class="item-title">
                <i class="icon-ziliao"></i>
                <span>故障原因分布</span>
                <p>fault</p>
              </div>
              <div id="reason-echart" style="width: 100%;height:250px;"></div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="table-box">
      <IconTitle title="基本信息" imgUrl="yunwei">
        <span class="slot">品牌管理</span>
      </IconTitle>
      <div class="echarts-box">
        <el-row :gutter="10">
          <el-col :span="8"
          >
            <div class="echarts-item">
              <div class="item-title">
                <i class="icon-ziliao"></i>
                <span>故障次数</span>
                <p>fault</p>
              </div>
              <div id="error-maintain-echart" style="width: 100%;height:250px;"></div>
            </div>
          </el-col>
          <el-col :span="8"
          >
            <div class="echarts-item">
              <div class="item-title">
                <i class="icon-ziliao"></i>
                <span>维修费用</span>
                <p>fault</p>
              </div>
              <div id="maintain-fee-echart" style="width: 100%;height:250px;"></div>
            </div>
          </el-col>
          <el-col :span="8"
          >
            <div class="echarts-item">
              <div class="item-title">
                <i class="icon-ziliao"></i>
                <span>时间</span>
                <p>fault</p>
              </div>
              <div id="time-echart" style="width: 100%;height:220px;"></div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="table-box">
      <IconTitle title="基本信息" imgUrl="yunwei">
        <span class="slot">品牌管理</span>
      </IconTitle>
      <div class="echarts-box">
        <div class="echarts-item">
          <div class="item-title">
            <i class="icon-ziliao"></i>
            <span>月度统计</span>
            <p>fault</p>
          </div>
          <div id="month-echart" style="width: 100%;height:250px;"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import IconTitle from "@/components/icon-title/index.vue";

export default {
  name: "equipment",
  components: {
      IconTitle
  },

  data() {
    return {
        errorLevels: [
            {name: '一般',percentage: '82%',value: 82},
            {name: '严重',percentage: '6%',value: 3},
            {name: '紧急',percentage: '12%',value: 5},
        ]
    };
  },
  created() {
   
  },
  mounted() {
    this.init()
  },
  methods: {
      levelFormat(){

      },
      init(){
          this.typeEchartFun()
          this.reasonEchartFun()
          this.errorMaintainEchartFun()
          this.maintainTimeEchartFun()
          this.timeEchartFun()
          this.monthEchartFun()
      },
      typeEchartFun(){
          // 基于准备好的dom，初始化echarts实例
          var myChart = this.$echarts.init(document.getElementById('type-echart'));

          // 指定图表的配置项和数据
          var option = {
              tooltip: {
                  trigger: 'item',
                  formatter: '{a} <br/>{b}: {c} ({d}%)'
              },
              series: [
                  {
                      name: '故障类型分布',
                      type: 'pie',
                      selectedMode: 'multiple',
                      selectedOffset: '20',
                      radius: ['20%', '60%'],
                      data: [
                          {
                              value: 1548,
                              name: '油路故障',
                             /* labelLine: {
                                  length: 50
                              },*/
                              label: {
                                  formatter: '{b}: {c} ({d}%)',
                                  color:'#54B03A'
                              },
                              itemStyle:{color:'#54B03A'}
                          },
                          {
                              value: 20,
                              name: '管道故障',
                              selected: true,
                              label: {
                                  formatter: '{b}: {c} ({d}%)',
                                  color:'#F09035'
                              },
                              itemStyle:{color:'#F09035'}
                          },
                          {
                              value: 80,
                              name: '电器故障',
                              selected: true,
                              label: {
                                  formatter: '{b}: {c} ({d}%)',
                                  color:'#EA3223'
                              },
                              itemStyle:{color:'#EA3223'}

                          }
                      ]
                  }
              ]
          };

          // 使用刚指定的配置项和数据显示图表。
          option && myChart.setOption(option);
      },
      reasonEchartFun(){
          // 基于准备好的dom，初始化echarts实例
          var myChart = this.$echarts.init(document.getElementById('reason-echart'));

          // 指定图表的配置项和数据
          var option = {
              tooltip: {
                  trigger: 'item'
              },
              radar: {
                  // shape: 'circle',
                  indicator: [
                      { name: '机械故障', max: 6500 },
                      { name: '电器故障', max: 16000 },
                      { name: '传动故障', max: 30000 },
                      { name: '信息故障', max: 38000 },
                      { name: '其他', max: 52000 }
                  ]
              },
              series: [
                  {
                      name: 'Budget vs spending',
                      itemStyle:{color:'#5087EC'},
                      type: 'radar',
                      data: [
                          {
                              value: [5000, 14000, 28000, 26000, 42000],
                              name: 'Actual Spending'
                          }
                      ]
                  }
              ]
          };

          // 使用刚指定的配置项和数据显示图表。
          option && myChart.setOption(option);
      },
      errorMaintainEchartFun(){ //故障保养次数
          var myChart = this.$echarts.init(document.getElementById('error-maintain-echart'));
          var option = {
              xAxis: {
                  type: 'category',
                  data: ['机械故障', '电器故障', '传动故障', '信息化故障', '其它']
              },
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                      type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                  }
              },
              yAxis: {
                  type: 'value'
              },
              series: [
                  {
                      itemStyle: {
                          color: '#5087EC'
                      },
                      data: [150, 230, 224, 218, 135],
                      type: 'line'
                  }
              ]
          };
          option && myChart.setOption(option);
      },
      maintainTimeEchartFun(){ // 维修费用
          var myChart = this.$echarts.init(document.getElementById('maintain-fee-echart'));
          var option = {
              xAxis: {
                  type: 'category',
                  data: ['机械故障', '电器故障', '传动故障', '信息化故障', '其他']
              },
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                      type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                  }
              },
              yAxis: {
                  type: 'value'
              },
              series: [
                  {
                      itemStyle: {
                          color: '#5087EC'
                      },
                      data: [150, 230, 224, 218, 135, 147],
                      type: 'line'
                  }
              ]
          };
          option && myChart.setOption(option);
      },
      timeEchartFun(){
          // 基于准备好的dom，初始化echarts实例
          var myChart = this.$echarts.init(document.getElementById('time-echart'));

          // 指定图表的配置项和数据
          var option = {
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                      type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                  }
              },
              grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
              },
              xAxis: {
                  type: 'category',
                  data: ['机械故障', '电器故障', '传动故障', '信息化故障', '其他']

              },
              yAxis: {
                  type: 'value'
              },
              series: [
                  {
                      name: '停机时间',
                      itemStyle: {
                          color: '#E1424C'
                      },
                      type: 'bar',
                      stack: '总量',
                      label: {
                          show: true,
                          position: 'insideRight'
                      },
                      data: [320, 302, 301, 334]
                  },
                  {
                      itemStyle: {
                          color: '#7DC2CD'
                      },
                      name: '处理时间',
                      type: 'bar',
                      stack: '总量',
                      label: {
                          show: true,
                          position: 'insideRight'
                      },
                      data: [120, 132, 101, 134]
                  },
                  {
                      name: '处理时间',
                      itemStyle: {
                          color: '#58A55C'
                      },
                      type: 'bar',
                      stack: '总量',
                      label: {
                          show: true,
                          position: 'insideRight'
                      },
                      data: [320, 302, 301, 334]
                  }
              ]
          };

          // 使用刚指定的配置项和数据显示图表。
          option && myChart.setOption(option);
      },
      monthEchartFun(){
          // 基于准备好的dom，初始化echarts实例
          var myChart = this.$echarts.init(document.getElementById('month-echart'));

          // 指定图表的配置项和数据
          var option = {
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                      type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                  }
              },
              xAxis: {
                  type: 'category',
                  boundaryGap: false,
                  data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
              },
              yAxis: {
                  type: 'value'
              },
              series: [
                  {
                      data: [820, 932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330],
                      type: 'line',
                      itemStyle: {
                        color: '#5087EC'
                      },
                      areaStyle: {color: '#DCE7FB'}
                  }
              ]
          };

          // 使用刚指定的配置项和数据显示图表。
          option && myChart.setOption(option);
      },

  },
};
</script>
<style lang="scss">
.reanalysisEcharts{
    .echarts-box {
      .errorlevel{
        margin-top: 30px;
        font-size: 14px;
        label{
          color: #8C8C8C;
        }
        label.name{
          color:#101010;
          margin-right: 12px;
        }
      }
      .echart-des{

      }
      .week{
        .week-echart-left{
          margin-top: 41px;
          font-size: 14px;
          color: #595454;
          p{
            font-weight: bold;
            margin: 4px 0;
          }
          div:nth-child(1){
            p:nth-child(2){
              color:#B47B81;
              font-size: 20px;
            }

          }
          div:nth-child(2){
            margin-top: 26px;
            p:nth-child(2){
              color:#333333;
              font-size: 20px;
            }
          }
        }
      }
    }
}

</style>
